@use "sass:color";
@use '@app/style/mixins' as *;
@use '@app/style/vars' as *;

#root-layout {
    height: 100%;
}

body {
    margin: 0;
    font-weight: inherit;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
    overflow: hidden;

    &.sb-main-padded {
        overflow: inherit;
    }
}

* {
    @include scrollbars(8px, color.adjust($color-border, $lightness: -15%), transparent);
}

.hidden {
    display: none;
}

.no-select {
    user-select: none;
}

.no-border-radius {
    border-radius: 0;
}

.ant-layout {
    &-header {
        @include box-shadow-outer(0, 2px, 2px, .1);
        background-color: white;
        padding: 0 10px;
        overflow-x: hidden;
        overflow-y: hidden;
        text-align: center;
        z-index: 1000;

        @media (max-width: 1000px) {
            text-align: left;
        }
    }
}

#root-layout > .ant-layout {
    @include fixed(0, 0, 0, 0);
}

svg {
    &:focus {
        outline: none;
    }
}

hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 30px 0;
}

//
// Typography
//
ul {
    &.blank {
        list-style: none;
    }
}

.section {
    padding-bottom: 10px;
}

//
// Sidebars
//
.sidebar-left,
.sidebar-right {
    background: $color-white !important;
    border: 0;
    border-left: 1px solid $color-border;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-left {
    & {
        background: $color-white;
        border: 0;
        border-right: 1px solid $color-border;
        padding-top: 10px;
        display: flex;
        flex-flow: column;
        flex-grow: 1;
    }

    .ant-layout-sider-children,
    .ant-tabs,
    .ant-tabs-content,
    .ant-tabs-tabpane,
    .tab-panel {
        display: flex;
        flex-flow: column;
        flex-grow: 1;
        max-height: 100%;
        min-height: 100%;
    }

    .ant-tabs-tabpane {
        min-height: 100%;
    }

    .ant-tabs-tabpane {
        flex-shrink: 1 !important;
    }
}

.sidebar-right {
    .ant-collapse {
        background: transparent;
    }
}

$toggle-button-top: 72px;
$toggle-button-offset-left: 10px;
$toggle-button-offset-right: 27px;
$sidebar-size: 320px;

.content {
    .toggle-button-left {
        & {
            @include absolute($toggle-button-top, auto, auto, $toggle-button-offset-left);
        }

        &.visible {
            left: $sidebar-size + $toggle-button-offset-left;
        }
    }

    .toggle-button-right {
        & {
            @include absolute($toggle-button-top, $toggle-button-offset-right, auto, auto);
        }

        &.visible {
            right: $sidebar-size + $toggle-button-offset-right;
        }
    }
}

.force-color {
    color: rgba(0, 0, 0, 85%) !important;

    &:hover {
        color: rgba(0, 0, 0, 85%) !important;
    }

    &:hover {
        background-color: #eee;
    }

    .ant-menu-title-content {
        color: rgba(0, 0, 0, 85%) !important;
    }

    &.ant-menu-item-disabled {
        color: rgba(0, 0, 0, 25%) !important;

        .ant-menu-title-content {
            color: rgba(0, 0, 0, 25%) !important;
        }
    }
}

.ant-menu-item-disabled {
    .force-color {
        color: rgba(0, 0, 0, 25%) rgba(0, 0, 0, 85%);
    }
}

.context-menu {
    border: 1px solid $color-border;
}

.ant-menu {
    box-shadow: none;

    &.ant-menu-root,
    &.ant-menu-submenu {
        border: 1px solid $color-border;
        border-radius: 2px;

        .ant-menu-item-selected {
            background: none;
        }
    }
}

.ant-btn-group {
    .ant-tooltip-disabled-compatible-wrapper {
        display: flex !important;
    }
}

.ant-input-number-affix-wrapper {
    width: 100%;
}

.ant-input-number-prefix {
    color: $color-text;
    font-family: monospace;
    font-weight: bolder;
    margin-right: .5rem;
}

//
// > Properties
//
.property {
    & {
        margin-bottom: .5rem;
    }

    &:last-child {
        margin-bottom: 0;
    }

    &-label {
        padding-right: .5rem;
        padding-top: .25rem;
    }

    &-value {
        .ant-select {
            max-width: 100%;
            min-width: 100%;
        }

        .ant-checkbox-wrapper {
            margin-top: .25rem;
        }
    }
}

.properties-subsection {
    & {
        margin-bottom: 1rem;
    }

    &:last-child {
        margin: 0;
    }
}

//
// > Menu Items
//
header {
    .ant-btn-group {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}

.top-menu {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    padding: 10px 0;

    & > div {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .ant-space-compact-block {
        width: auto;
    }

    .logo {
        color: $color-white;
        font-size: 1.1rem;
        font-weight: bold;
        height: 40px;
    }
}

.menu {
    &-separator {
        background: $color-border-dark;
        display: inline-block;
        height: 1rem;
        margin-left: .5rem !important;
        margin-right: .5rem !important;
        width: 1px;
    }

    &-dropdown {
        margin-left: .5rem;
        margin-right: .5rem;
    }

    &-item {
        margin-left: .25rem;
        margin-right: .25rem;
    }

    &-item,
    &-item > button {
        & {
            background: transparent !important;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            opacity: .8;
        }

        &:hover {
            opacity: 1;
        }

        &:disabled {
            opacity: .4;
        }
    }
}

//
// > Trees
//
.tree-item {
    &-header-container {
        margin-top: 1px;
        margin-bottom: 1px;
        height: 34px;
    }

    &-header {
        align-items: center;
        cursor: default;
        direction: ltr;
        display: flex;
        padding: 5px;

        &:hover {
            background-color: $color-theme-blue-dark;
            border: 0;
            border-radius: 2px;
            color: $color-white;
        }

        &.selected {
            background-color: $color-theme-blue;
            border: 0;
            border-radius: 2px;
            color: $color-white;
        }
    }

    &-title {
        @include truncate;
        margin-left: 10px;
    }
}

.print-mode {
    display: none;
}

@media print {
    .screen-mode {
        display: none;
    }

    .print-mode {
        display: block;
    }

    .print-diagram {
        page-break-after: always;
    }

    .ant-message {
        display: none;
    }

    .ant-dropdown {
        display: none;
    }

    #crowd-shortcut {
        display: none;
    }
}